<template>
  <div>
    <a-modal title="设置包装" :visible="visible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <div class="flex-c mb10">
        <div class="label">是否扣减包装库存：</div>
        <div class="value">
          <a-radio-group v-model="form.packingStockNeedout">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="flex-c mb10">
        <div class="label">选择包装存放仓库：</div>
        <div class="value">
          <a-select placeholder="请选择" allow-search v-model="form.packingWarehouseCode">
            <a-option v-for="item of houseList" :label="item.warehouseName" :value="item.warehouseCode"></a-option>
          </a-select>
        </div>
      </div>
      <div class="flex-c mb10">
        <div class="label">选择包材：</div>
        <div class="value">
          <a-select @change="selPack" placeholder="请选择" allow-search v-model="form.packingSku">
            <a-option v-for="item of packageList" :label="item.skuName" :value="item.sku"></a-option>
          </a-select>
        </div>
      </div>

      <div class="pack-info" v-if="form.packingSku">
        <div class="left">
          <a-image :src="packInfo.productPicList && packInfo.productPicList[0] ? packInfo.productPicList[0].url : ''" />
        </div>
        <div class="right">
          <div class="item">
            <span class="title">名称：</span>
            <span class="value">{{ packInfo.skuName }}</span>
          </div>
          <div class="item">
            <span class="title">SKU：</span>
            <span class="value">{{ packInfo.skuName }}</span>
          </div>
          <div class="item">
            <span class="title">长宽高：</span>
            <span class="value">{{ packInfo.volume.length }}×{{ packInfo.volume.width }}×{{ packInfo.volume.height }}</span>
          </div>
          <div class="item">
            <span class="title">重量：</span>
            <span class="value">{{ packInfo.weight.weight }}</span>
          </div>

          <!-- <div class="item" v-for="item of packInfo.propList">
            <span class="title">{{ item.name }}：</span>
            <span class="value">{{ getPropValue(item) }}</span>
          </div> -->
        </div>
      </div>

      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk">确认</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { findShopListByShare, findWarehouseListByParam } from '@/api/warehouse'
  import { pagePacking } from '@/api/product'
  import { updateItemPack } from '@/api/order'
  import { Message } from '@arco-design/web-vue'
  import { test } from '@/api/url'
  export default defineComponent({
    props: ['ids'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data: any = reactive({
        houseList: [],
        form: {},
        packageList: [],
        packInfo: {},
      })

      const open = () => {
        getHouseList()
        console.log(props.ids)
        getPackageList()
      }
      const handleOk = async () => {
        if (!data.form.packingSku) {
          return Message.error('请选择包材')
        }
        let params = {
          orderItemIdList: props.ids,
          ...data.form,
        }
        const res: any = await updateItemPack(params)
        if (res) {
          Message.success('包装设置成功')
          emit('save')
          handleCancel()
        }
      }
      const handleCancel = () => {
        data.loading = false
        data.form = {}
        visible.value = false
      }

      const getHouseList = async () => {
        const res = await findWarehouseListByParam()
        data.houseList = res?.data || []
      }

      const getPackageList = async () => {
        const res: any = await pagePacking({ pageSize: 999999, skuTypeList: ['PACKING'] })
        data.packageList = res?.data?.records || []
      }

      const selPack = (val: string) => {
        let item: any = data.packageList.find((e: any) => e.sku == val)
        if (item) {
          data.form.packingName = item.skuName
          data.packInfo = item
        }
      }

      const getPropValue = (item: any) => {
        let text = ''
        switch (item.type) {
          case 1:
          case 4:
            text = item.valueStr
            break
          case 2:
          case 7:
          case 8:
            text = item.valueStrList.join(',')
            break
          case 3:
            text = item.valueBoolean ? '是' : '否'
            break
          case 5:
            text = item.valueNumber
            break
          case 6:
            text = item.valueBigDecimal
            break
        }
        return text
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        selPack,
        getPropValue,
      }
    },
  })
</script>

<style lang="less" scoped>
  .flex-c {
    display: flex;
    .label {
      width: 130px;
      text-align: right;
    }
    .value {
      flex: 1;
    }
  }

  .pack-info {
    display: flex;
    width: 100%;
    margin-top: 10px;
    .left {
      width: 90px;
      height: 90px;
    }
    .right {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      .item {
        width: 50%;
        span {
          display: inline-block;
        }
        .title {
          width: 100px;
          text-align: right;
        }
      }
    }
  }
</style>
